﻿<template>
  <a-spin :spinning="spinning">
    <a-card title="新增平台">
      <a-form
        :form="form"
        labelAlign="left"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-row>
          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="唯一标识">
              <a-input
                v-decorator="[
                  'uUid',
                  { rules: [{ required: true, message: '请输入唯一标识' }] },
                ]"
                placeholder="请输入唯一标识"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="昵称">
              <a-input
                v-decorator="[
                  'nickName',
                  { rules: [{ required: true, message: '请输入昵称' }] },
                ]"
                placeholder="请输入昵称"
              />
            </a-form-item>
          </a-col>
          <!-- <a-col :lg="8" :md="8" :sm="24">
            <a-form-item label="推广链接">
              <a-input v-decorator="['linkUrl']" style="width: 100%" />
            </a-form-item>
          </a-col> -->
        </a-row>
        <a-row>
          <a-col
            :lg="8"
            :md="8"
            :sm="24"
            v-show="modifyEntity.operation != this.operationFlag.Add"
          >
            <a-form-item label="二维码">
              <img v-decorator="['qrCode']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <footer-tool-bar>
      <a-tag color="blue">操作完是否继续？</a-tag>
      <a-switch v-model="hasClose" :loading="loading">
        <a-icon slot="checkedChildren" type="check" />
        <a-icon slot="unCheckedChildren" type="close" />
      </a-switch>
      <a-divider type="vertical" />
      <a-button icon="rollback" @click="handleRefresh">返回</a-button>
      <a-divider type="vertical" />
      <a-button icon="reload" @click="handleReset" :loading="loading"
        >重置</a-button
      >
      <a-divider type="vertical" />
      <a-button icon="check-circle" :loading="loading" @click="handleSubmit"
        >保存</a-button
      >
    </footer-tool-bar>
  </a-spin>
</template>

<script>
import moment from "moment";
import footerToolBar from "@/components/footerToolbar";
import {
  getSysPlatform,
  addSysPlatform,
  updateSysPlatform,
} from "./sysPlatform";
export default {
  components: {
    footerToolBar,
  },
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
        };
      },
    },
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 14 }, xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 是否只读
      readonly: false,
      form: this.$form.createForm(this),
      formFields: {},
      entity: {},
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    moment,
    //#region 加载数据

    loadData() {
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        this.spinning = true;
        // 编辑状态是只读
        this.readonly = true;
        this.formFields = this.form.getFieldsValue();
        let that = this;
        getSysPlatform({ id: this.modifyEntity.id })
          .then((res) => {
            if (!res.data) {
              this.$notification.warning({ description: "数据不存在" });
              this.$emit("handleRefresh");
            }
            that.entity = res.data;
            var setData = {};
            Object.keys(that.formFields).forEach((item) => {
              setData[item] = that.entity[item];
            });
            that.form.setFieldsValue(setData);
            that.spinning = false;
          })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.spinning = true;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            addSysPlatform(values)
              .then((res) => {
                that.submitResult(res);
              })
              .catch((error) => {
                that.spinning = false;
              });
          } else {
            let updateModel = Object.assign(
              that.entity,
              that.form.getFieldsValue()
            );
            updateSysPlatform(updateModel)
              .then((res) => {
                that.submitResult(res);
              })
              .catch((error) => {
                that.spinning = false;
              });
          }
        } else {
          this.spinning = false;
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.success) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
      this.spinning = false;
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false;
      this.$emit("handleRefresh");
    },
    // 重置
    handleReset() {
      this.loadData();
    },
    //#endregion
  },
};
</script>
